<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/v1/iview/v2/iview.css">
    <link rel="stylesheet" type="text/css" href="/static/v1/style/app.css">
    <link rel="stylesheet" href="__STATIC__/store/css/quill-snow.css">
</head>
<body>
<div id="vueApp">
    <Spin size="large" fix v-if="spinShow"></Spin>
    <Row v-cloak>
        <i-col span="24">
            <i-form ref="formInline" :model="formInline" inline class="header-table-search-forms">
                <i-form-item prop="activity_id" class="forms-item">
                    <i-select v-model="formInline.activity_id" placeholder="按商品类型搜索" multiple filterable clearable style="width: 220px">
                        <i-option v-for="(items, index) in goodsTypeItems" :value="items.value" :key="items.value">
                            {{ items.label }}
                        </i-option>
                    </i-select>
                </i-form-item>

                <i-form-item prop="grant_status" class="forms-item">
                    <i-select v-model="formInline.grant_status" placeholder="按商品状态搜索" multiple filterable clearable  style="width: 270px">
                        <i-option :value="1" :key="1">上架中</i-option>
                        <i-option :value="2" :key="2">待上架</i-option>
                        <i-option :value="3" :key="3">仓库中</i-option>
                        <i-option :value="4" :key="4">已下架</i-option>
                    </i-select>
                </i-form-item>
                <i-form-item prop="name" class="forms-item">
                    <i-input type="text" v-model="formInline.name" placeholder="按商品名称搜索" inline clearable></i-input>
                </i-form-item>
                <i-form-item>
                    <i-button type="primary" @click="searchClickEvent('formInline')" icon="ios-search">搜 索</i-button>
                    <i-button @click="searchResetClickEvent('formInline')" icon="md-refresh" style="margin-left: 10px">重 置</i-button>
                </i-form-item>
                <div class="header-table-search-button">
                    <i-button type="primary" @click="participationRulesCreateEvent">添加</i-button>
                </div>
            </i-form>

        </i-col>
    </Row>
    <Row v-cloak>
        <i-col span="24">
            <i-table border :columns="columns" :data="data" style="margin-top: 8px">
                <template slot-scope="{ row }" slot="goods_type">
                    {{ $Arrays.arrayLookup(goodsTypeItems, 'value', row.goods_type, 'label') }}
                </template>

                <template slot-scope="{ row }" slot="people_exchange_stated">
                    <span>
                        {{parseFloat(row.date_exchange_stated)===1?'每'+row.date_exchange_days+'天兑换'+row.date_exchange_num+'次':''}}
                        {{parseFloat(row.people_exchange_stated)===1?'可兑换'+row.people_exchange_num+'次':''}}
                    </span>
                </template>
                <template slot-scope="{ row }" slot="payment_type">
                    <span v-if="parseFloat(row.payment_type) === 1">{{parseFloat(row.point_amount)}}积分</span>
                    <span v-if="parseFloat(row.payment_type) === 2">{{parseFloat(row.youth_amount)}}青年币</span>
                    <span v-if="parseFloat(row.payment_type) === 3">{{parseFloat(row.point_amount)}}积分+{{parseFloat(row.purchase_amount)}}金额</span>
                    <span v-if="parseFloat(row.payment_type) === 4">{{parseFloat(row.youth_amount)}}青年币+{{parseFloat(row.purchase_amount)}}金额</span>
                    <span v-if="parseFloat(row.payment_type) === 5">{{parseFloat(row.purchase_amount)}}金额</span>
                </template>
                <template #name="{ row, index }">{{row.name}}</template>
                <template #cover="{ row, index }">
                    <avatar :src="row.cover" shape="square"></avatar>
                </template>

                <template #status="{ row, index }">
                    <tag :color="row.status_text.color">{{row.status_text.label}}</tag>

                </template>

                <template #action="{ row, index }">
                    <i-button type="primary" size="small" style="margin-right: 5px" @click="participationRulesUpdateEvent(row, index)">编辑</i-button>
                    <i-button type="error" size="small" style="margin-right: 5px" @click="participationRulesRemoveEvent(row, index)">删除</i-button>
                </template>
            </i-table>
            <div style="margin-top: 12px;text-align: end">
                <Page :total="total" :page-size="formInline.limit" @on-change="pageChangeEvent" show-elevator show-total/>
            </div>
        </i-col>
    </Row>
</div>
<script type="text/javascript" src="/static/v1/iview/v2/vue.min.js"></script>
<script type="text/javascript" src="/static/v1/iview/v2/iview.min.js"></script>
<script type="text/javascript" src="/static/v1/script/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/static/v1/script/app.js"></script>
<script>
    new Vue({
        el: '#vueApp',
        mixins: [_discountCouponsV2],
        data: {
            spinShow:false,
            goodsTypeItems:[
                {value: 1, label: '优惠劵'},
                {value: 2, label: '现金红包'},
                {value: 3, label: '实物商品'},
                {value: 4, label: '虚拟商品'},

            ],
            paymentTypeItems:[
                {value: 1, label: '积分'},
                {value: 2, label: '青年币'},
                {value: 3, label: '积分+现金'},
                {value: 4, label: '青年币+现金'},
                {value: 5, label: '现金'},
            ],
            formInline: {
                activity_id: [],
                grant_status: [],
                page: 1,
                limit: 10
            },
            columns: [
                {title: '#ID', key: 'id', align: 'center', width: 60},
                {title: '商品类型', slot: 'goods_type', align: 'center', width: 120},
                {title: '所属分类', key: 'category_name', align: 'center', width:  160},
                {title: '商品名称', slot: 'name', align: 'center',  width: 100},
                {title: '商品封面', slot: 'cover', align: 'center',  width: 120},
                {title: '兑换限制', slot: 'people_exchange_stated', align: 'center', minWidth: 160},
                {title: '兑换类型', slot: 'payment_type', align: 'center', minWidth: 100},
                {title: '商品销量', key: 'sale_num', align: 'center', width: 100},
                {title: '商品状态', slot: 'status', align: 'center', width: 130},
                {title: '创建时间', key: 'create_date', align: 'center',width: 150},
                {title: '操作', slot: 'action', width: 170, align: 'left'}
            ],
            data: [],
            total: 0,
        },

        methods: {
            searchClickEvent() {
                let _this = this;
                _this.spinShow = true;
                _this.getTableLists();
            },

            searchResetClickEvent() {
                let _this = this;
                _this.spinShow = true;
                _this.formInline = {
                    activity_id: [],
                    grant_status: [],
                    page: 1,
                    limit: 10
                };
                _this.getTableLists();
            },

            pageChangeEvent(page) {
                let _this = this;
                _this.spinShow = true;
                _this.formInline.page = page;
                _this.getTableLists();
            },

            getTableLists() {
                let _this = this;
                $.post(window.location.href, _this.formInline, function (res) {
                    _this.data = res.data.data;
                    _this.total = res.data.total;
                    _this.spinShow = false;
                });
            },

            participationRulesUpdateEvent(rows, index) {
                let _this = this;
                window.location.href = '/admin.php/points_mall/goods/update?id='+rows.id;
            },
            participationRulesCreateEvent() {
                let _this = this;
                window.location.href = '/admin.php/points_mall/goods/create';
            },

            participationRulesRemoveEvent(){

            }
        },

        created() {
            let _this = this;
            _this.getTableLists();
            _this.getAssociationItems(true);
        }
    });

</script>
</body>
</html>